<template>
  <h1>{{name}}</h1>

  <button @click="setUserinfo">设置Userinfo</button>

  <table>
    <tr v-for="(userinfo,index) in userinfos.infos" :key="userinfo.id">
      <td>{{userinfo.id}}</td>
      <td>{{userinfo.username}}</td>
      <td>{{userinfo.password}}</td>
    </tr>

  </table>

  {{sex}}
</template>

<script setup>
import {ref, reactive, computed} from "vue";

const name = ref('张三')

const userinfos = reactive({sex:1,infos:[]})

const sex = computed(()=>{
  return userinfos.sex == 1 ? '男':'女'
})

const setUserinfo = () => {
  userinfos.infos=[{'id':1,'username':'zhangsan','password':'123456'},{'id':2,'username':'zhangsan','password':'123456'},{'id':3,'username':'zhangsan','password':'123456'}]
}

</script>

<style scoped>

</style>